<style>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 200px;
    height: 200px;
  }
  .card {
    width: 250px;
    margin-top:20px
  }

  .item-column{
    margin-top: 8px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
<template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item label="用户id：">
        <el-input v-model="dataForm.userId" @input.native="changeCode" maxlength="40" placeholder="用户id" clearable></el-input>
      </el-form-item>
      <el-form-item label="用户昵称：">
        <el-input v-model="dataForm.nickname" placeholder="用户昵称" clearable></el-input>
      </el-form-item>
      <el-form-item lable="性别：">
        <el-select v-model="dataForm.gender" clearable placeholder="请选择">
          <el-option
            v-for="(value, key)  in global.Gender"
            :key="key"
            :label="value"
            :value="key">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="注册时间：">
        <time-picker  :datePattern="pattern" @pick="callbackPickTime"></time-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row>
      <el-col :span="4" v-for="(o, index) in dataList.length" :key="o" :offset="0">
        <el-card :body-style="{ padding: '0px',margin:'20px' }" class="card" shadow="hover">
          <img :src="dataList[index].avatar" class="image">
          <div style="padding: 5px;">
            <div class="item-column">
              昵称:<span v-text="dataList[index].nickname" style="color: #1f811f"></span>
            </div>
            <div class="item-column">
              注册时间:<span class="time" v-text="dataList[index].createTime"></span>
            </div>
            <div class="bottom clearfix">
              <el-button type="text" class="button" @click="detail(dataList[index].userId)">更多详情...</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <user-detail v-if="detailVisible" ref="userDetail"></user-detail>
  </div>
</template>

<script>
  import TimePicker from '@/views/time-picker'
  import UserDetail from './user-detail-dialog'
  import enums from '@/common/enum'
  export default {
    data () {
      return {
        pattern:'yyyy-MM-dd HH:mm:ss',
        dataForm: {
          nickname:'',
          userId:'',
          gender:'',
          beginTime:'',
          endTime:''
        },
        global:enums,
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataList: [],
        dataListSelections: [],
        addOrUpdateVisible: false,
        detailVisible:false,
      }
    },
    components: {
      TimePicker,
      UserDetail
    },
    activated () {
      this.getDataList()
    },
    methods: {
      callbackPickTime(data){
        this.dataForm.beginTime=data[0];
        this.dataForm.endTime=data[1];
      },
      // 获取数据列表
      getDataList () {
        this.$http({
          url: this.$http.adornUrl('/simida/userinfo/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'userId': this.dataForm.userId,
            'nickname':this.dataForm.nickname,
            'gender':this.dataForm.gender,
            'beginTime':this.dataForm.beginTime,
            'endTime':this.dataForm.endTime
          },false)
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list;
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = [];
            this.totalPage = 0
          }
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      //详情
      detail(userId){
         this.detailVisible=true;
         this.$nextTick(()=>{
           this.$refs.userDetail.details(userId)
         })
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      // 删除
      deleteHandle (id) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.userId
        })
        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/simida/userinfo/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },
      changeCode() {
        this.$nextTick(() => {
          if(this.dataForm.userId !== null){
            this.dataForm.userId = this.dataForm.userId.replace(/[^\d]/g,'')
          }
        })
      },
    }
  }
</script>
